<template>
  <div class="root">
    <div class="month_transaction">
      <div class="month_transaction_top">
        <div class="float_left date_price">
          <wux-date-picker
            mode="month"
            data-mode="month"
            @change="onConfirm"
            @valueChange="onValueChange"
            :value="currentDate"
          >
            <wux-cell :title="transaction.date" is-link></wux-cell>
          </wux-date-picker>
          <span>支出 ￥</span>
          <span class="margin_r">{{transaction.expenditure}}</span>
        </div>
      </div>
      <wux-spin nested :spinning="contentSpinning">
        <div
          class="tran_info"
          v-for="(item,index) in transaction.list"
          :key="index"
          @click="toDetailPage(item)"
        >
          <div
            :class="index.length > 0 && index === items.length - 1  ? 'tran_border_el':'tran_border'"
          >
            <i
              class="icon_img float_left"
              :style="{background:'url(../../static/images/user.png)',backgroundSize:'cover'}"
            ></i>
            <div class="float_left">
              <p>{{item.comment}}</p>
              <span>{{item.createTime}}</span>
            </div>
            <span class="money_font float_right">{{item.cost}}</span>
          </div>
        </div>
      </wux-spin>
    </div>
  </div>
</template>

<script>
import { doHandleDate } from "@/utils/index";

import transactionApi from "@/api/transaction";

export default {
  data() {
    return {
      value: "请选择",
      transaction: {
        list: []
      },
      currentDate: doHandleDate(),
      contentSpinning: false
    };
  },
  mounted() {
    wx.showShareMenu();
    this.transactionApi(doHandleDate());
  },
  methods: {
    toDetailPage(item) {
      this.$store.dispatch("saveOrderId", item.orderId);
      this.$router.push({ path: "/pages/transactionDetail" });
    },
    transactionApi(date) {
      let self = this;
      this.contentSpinning = true;
      this.$http
        .post({
          url: transactionApi.queryTransaction,
          method: "POST",
          body: {
            createTime: date,
            openId: self.$store.state.user.openId
          }
        })
        .then(res => {
          this.transaction = res;
          self.contentSpinning = false;
        })
        .then(res => {
          self.contentSpinning = false;
        });
    },

    //todo 方法引入无效 应该是哪写错了
    onConfirm(e) {
      this.currentDate = e.target.label;
      this.transactionApi(this.currentDate);
    }
  }
};
</script>

<style scoped lang="less">
.root {
  .month_transaction {
    .month_transaction_top {
      background: #f6f6f6;
      overflow: hidden;
      padding: 10px 0 10px 10px;
      .float_left {
        float: left;
      }
      .date_price {
        width: 50%;
        span {
          font-size: 12px;
          color: #bababa;
        }
        .margin_r {
          margin-right: 6px;
        }
      }
    }
    .tran_info {
      padding: 0 20px;
      .tran_border_el {
        padding: 15px 0;
        overflow: hidden;
        .icon_img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
        .float_left {
          float: left;
          p {
            font-weight: 700;
          }
          span {
            font-size: 12px;
            color: #bbbbbb;
          }
        }
        .money_font {
          font-weight: 700;
        }
        .float_right {
          float: right;
        }
      }
      .tran_border {
        padding: 15px 0;
        border-bottom: 1px solid #e4e4e5;
        overflow: hidden;
        .icon_img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
        .float_left {
          float: left;
          p {
            font-weight: 700;
          }
          span {
            font-size: 12px;
            color: #bbbbbb;
          }
        }
        .money_font {
          font-weight: 700;
        }
        .float_right {
          float: right;
        }
      }
    }
  }
}
</style>